<template>
	<div class="res-regions-list-container">
		<Row>
			<Col span="4">
				<Tree :data="areaList" class="tree-data-container" @on-select-change="onSelectChange" />
			</Col>
			<Col span="20">
				<Button type="error" icon="md-add" @click="onAdd">新增局站</Button>
				<div class="ivu-inline-block ivu-fr">
					<Dropdown @on-click="onChangeTableSize" trigger="click">
						<Tooltip class="ivu-ml" content="密度" placement="top">
							<i-link>
								<Icon type="md-list" />
							</i-link>
						</Tooltip>
						<template #list>
							<DropdownMenu>
								<DropdownItem name="default" :selected="tableSize === 'default'">默认</DropdownItem>
								<DropdownItem name="large" :selected="tableSize === 'large'">宽松</DropdownItem>
								<DropdownItem name="small" :selected="tableSize === 'small'">紧凑</DropdownItem>
							</DropdownMenu>
						</template>
					</Dropdown>
					<Tooltip class="ivu-ml" :content="tableFullscreen ? '退出全屏' : '全屏'" placement="top">
						<i-link @click="onFullscreen">
							<Icon :custom="tableFullscreen ? 'i-icon i-icon-exit-full-screen' : 'i-icon i-icon-full-screen'" />
						</i-link>
					</Tooltip>
					<Tooltip class="ivu-ml" content="刷新" placement="top">
						<i-link @click="onRefresh">
							<Icon custom="i-icon i-icon-refresh" />
						</i-link>
					</Tooltip>
					<Dropdown trigger="click">
						<Tooltip class="ivu-ml" content="列设置" placement="top">
							<i-link>
								<Icon type="md-options" />
							</i-link>
						</Tooltip>
						<template #list>
							<DropdownMenu>
								<div class="ivu-p-8">列展示</div>
								<Divider size="small" class="ivu-mt-8 ivu-mb-8" />
								<li class="ivu-dropdown-item" v-for="item in dropdownColumns" :key="item.title"
									@click="item.show = !item.show">
									<Checkbox v-model="item.show"></Checkbox>
									<span>{{ item.title }}</span>
								</li>
							</DropdownMenu>
						</template>
					</Dropdown>
				</div>
				<Table ref="table" :columns="tableColumns" :data="list" :loading="loading" :size="tableSize" class="ivu-mt">
					<template #action="{ row }">
						<div @click.stop.prevent>
							<a style="color: #2d8cf0;" @click="onEdit(row)">编辑</a>
							<Divider type="vertical" />
							<Poptip confirm title="您确定删除该局站吗？" transfer @on-ok="onDelete(row)">
								<a style="color: #ed4014;">删除</a>
							</Poptip>
						</div>
					</template>
				</Table>
				<div class="ivu-mt ivu-text-center">
					<Page :total="total" v-model="pageNum" show-total show-sizer show-elevator :page-size="pageSize"
						@on-change="onChangePage" @on-page-size-change="onChangePageSize" />
				</div>
			</Col>
		</Row>
		<Modal :title="modalTitle" v-model="visible" @on-cancel="onCancel" class-name="add-modal" :mask-closable="false">
			<Form ref="resRegionInfo" :model="resRegionInfo" :rules="resRegionRules">
				<Row :gutter="8">
					<Col span="24">
						<FormItem label="局站名称" prop="regionName">
							<Input v-model="resRegionInfo.regionName" placeholder="请输入局站名称"/>
						</FormItem>
					</Col>
					<Col span="24">
						<FormItem label="所属地区" prop="cityId">
							<Select v-model="resRegionInfo.cityId" placeholder="请选择所属地区" clearable filterable>
								<Option v-for="item in cityList" :value="item.nodeId" :key="item.nodeId">
									<span>{{ item.nodeName }}</span>
								</Option>
							</Select>
						</FormItem>
					</Col>
					<Col span="24">
						<FormItem label="备注" prop="remark">
							<Input v-model="resRegionInfo.remark" placeholder="请输入备注" type="textarea"/>
						</FormItem>
					</Col>
				</Row>
			</Form>
			<template #footer>
				<Button type="text" @click="onCancel">取消</Button>
				<Button type="primary" @click="onConfirm" :loading="loading">确定</Button>
			</template>
		</Modal>
	</div>
</template>
<script>
import { cloneDeep } from 'lodash'
import { getAreaList } from '@/api/common'
import { getResRegionList, createResRegion, updateResRegion } from '@api/res-region'

export default {
	data() {
		return {
			loading: false,
			list: [],
			pageNum: 1,
			pageSize: 10,
			total: 0,
			tableSize: 'small',
			tableFullscreen: false,
			modalTitle: '',
			visible: false,
			areaList: [],
			selectedArea: [],
			cityList: [],
			resRegionInfo: {
				id: '',
				regionName: '',
				cityId: '',
				remark: ''
			},
			resRegionRules: {
				regionName: [
					{ required: true, message: `请输入局站名称` },
				],
				cityId: [
					{ required: true, message: `请选择所属城市` },
				],
			},
		}
	},
	computed: {
		columns() {
			return [
				{ title: '局站名称', key: 'regionName', width: 160 },
				{ title: '所属地市', key: 'cityName', width: 200 },
				{ title: '备注', key: 'remark', minWidth: 200 },
				{ title: '操作', key: 'action', slot: 'action', align: 'center', width: 120, fixed: 'right'}
			]
		},
		tableColumns() {
			const columns = [...this.columns];
			return columns
		},
		dropdownColumns() {
			return this.columns.filter(item => item.title)
		}
	},
	async mounted() {
		const response = await getAreaList({})
		this.onGenerateTree(response)
	},
	methods: {
		async getData() {
			if (this.loading) return;
			this.loading = true;
			const params = this.$parent.$parent.$refs.form.data;
			const response = await getResRegionList({
				pageSize: this.pageSize,
				pageNum: this.pageNum,
				cityId: this.selectedArea.nodeId || undefined,
				regionName: params.regionName || undefined,
			})
			this.list = response.records || [];
			this.total = response.total;
			this.loading = false;
		},
		onGenerateTree(areaList) {
			const treeData = areaList.filter(area => !area.parentId)
			for (let i = 0; i < treeData.length; i++) {
				treeData[i].expand = true
				treeData[i].children = []
				treeData[i].render = (h, { root, node, data }) => {
					return h('span', {}, data.nodeName)
				}
				cloneDeep(areaList).forEach(area => {
					if (area.parentId === treeData[i].nodeId) {
						if (!area.children) {
							area.expand = true
							area.children = []
						}
						area.render = (h, { root, node, data }) => {
							return h('span', {
								style: {
									width: '100%'
								}
							}, [
							h('span', {
									style: {
										display: 'inline-block',
										width: '80px',
									}
								}, data.nodeName),
							]);
						}
						areaList[i].children.push(area)
					}
				})
			}
			this.areaList = treeData
		},
		onSelectChange(_, selectedArea) {
			this.selectedArea = selectedArea
			this.getData()
		},
		onChangeTableSize(size) {
			this.tableSize = size;
		},
		onFullscreen() {
			this.tableFullscreen = !this.tableFullscreen;
			this.$emit('on-fullscreen', this.tableFullscreen);
		},
		onRefresh() {
			this.getData();
		},
		onChangePage(page) {
			this.pageNum = page;
			this.getData();
		},
		onChangePageSize(size) {
			this.pageNum = 1;
			this.pageSize = size;
			this.getData();
		},
		onSearch() {
			this.pageNum = 1;
			this.getData();
		},
		async onAdd() {
			const response = await getAreaList({
				nodeType: 'city'
			})
			this.cityList = response
			this.modalTitle = '新建机房'
			this.visible = true
			this.resRegionInfo.cityId = this.selectedArea.nodeId
		},
		async onEdit(row) {
			const response = await getAreaList({
				nodeType: 'city'
			})
			this.cityList = response
			this.modalTitle = '编辑机房'
			this.visible = true
			this.resRegionInfo = { ...row }
		},
		onCancel() {
			this.$refs.resRegionInfo.resetFields()
			this.visible = false
			this.resRegionInfo = {
				id: '',
				regionName: '',
				cityId: '',
				remark: ''
			}
		},
		onConfirm() {
			this.$refs.resRegionInfo.validate(async (valid) => {
				if (valid) {
					this.loading = true
					const city = this.cityList.find(
						city => city.nodeId === this.resRegionInfo.cityId
					) || {}
					const response = this.resRegionInfo.id ?
						await updateResRegion({
							...this.resRegionInfo,
							cityName: city.nodeName
						}) :
						await createResRegion({
							...this.resRegionInfo,
							id: undefined,
							cityName: city.nodeName
						})
					this.loading = false
					if (response.code === 1000) {
						this.$Message.success('操作成功')
						if (!this.resRegionInfo.id) {
							this.pageNum = 1
						}
						this.getData()
						this.onCancel()
					}
				}
			})
		},
		async onDelete(row) {
			const response = await updateResRegion({
				id: row.id,
				isDelete: 1
			})
			if (response.code === 1000) {
				this.$Message.success('删除成功')
				this.pageNum = 1
				this.getData()
			}
		}
	}
}
</script>
<style lang="less">
.add-modal {
	.ivu-form-item-label {
		width: 100%;
		text-align: left;
	}
	.ivu-date-picker {
		width: 100%;
	}
}
</style>
